<script setup lang="ts">
import { onMounted, nextTick, watch } from 'vue'
import { useForm } from '@/composeAPI/useForm'
import _ from 'lodash'
import $api from '@/api'
import { useThemeConfig } from '@/composeAPI/useThemeConfig'
const { themeConfig } = useThemeConfig()
import $mitt from '@/utils/mitt'

const props = defineProps({
  rules: {
    type: Object,
    default: () => {}
  },
  item: {
    type: Object,
    default: () => {}
  },
  rowDirection: {
    type: String,
    default: () => 'horizontal'
  },
  rowNum: {
    type: Number,
    default: () => 3
  },
  labelWidth: {
    type: String,
    default: () => 'w-[85px]'
  },
  labelAlign: {
    type: String,
    default: () => 'left'
  },
  contentStyle: {
    type: String,
    default: () => ''
  },
  type: {
    type: String,
    default: () => 'add'
  },
  columns: {
    type: Array as any,
    default: () => []
  }
})

const { state, ruleForm, resetForm, clearValidate, showAsterisk } = useForm()

const init = async () => {
  state.loading = false
  state.type = _.cloneDeepWith(props.type)
  state.rules = _.cloneDeepWith(props.rules)
  state.currentData = _.cloneDeepWith(props.item)
}

const reset = () => {
  nextTick(() => {
    resetForm()
    state.currentData = _.cloneDeepWith(props.item)
  })
}

const clear = () => {
  nextTick(() => {
    clearValidate()
    state.currentData = _.cloneDeepWith(props.item)
  })
}

const changeTransfer = (e: any, item: any) => {
  state.currentData[item.prop] = e
}

const changeTreeSelect = (e: any, item: any) => {
  state.currentData[item.prop] = e
}

const changeTree = (e: any, item: any) => {
  state.currentData[item.prop] = e
}

onMounted(() => {
  init()
})

defineExpose({
  state,
  ruleForm,
  reset,
  clear
})

watch(
  () => state.currentData['new_password'],
  (val: any) => {
    $mitt.emit('new_password', {
      data: val
    })
  }
)
</script>

<template>
  <el-form ref="ruleForm" :model="state.currentData" :rules="props.rules">
    <el-descriptions border :column="props.rowNum" :direction="rowDirection">
      <el-descriptions-item
        v-for="(item, index) in props.columns"
        :key="index"
        :label-align="props.labelAlign"
        :span="item.span"
        :class-name="props.contentStyle"
        :label-class-name="props.labelWidth + ' ' + item?.labelStyle"
      >
        <template #label>
          <el-row class="w-full" :justify="props.labelAlign === 'right' ? 'end' : 'start'">
            <div class="w-[12px] flex items-center justify-center text-red-500">
              <span v-if="showAsterisk(item.prop)">*</span>
            </div>
            {{ item.label }}
          </el-row>
        </template>
        <template v-if="state.type !== 'view'">
          <el-form-item :prop="item.prop">
            <template v-if="item.type === 'text'">
              <input-text
                :type="item?.textType"
                v-model="state.currentData[item.prop]"
                :disabled="item.editDisabled && state.type === 'edit'"
                :placeholder="'请输入' + item.label"
              />
            </template>

            <template v-if="item.type === 'selectIcon'">
              <select-icon v-model="state.currentData[item.prop]" :disabled="item.editDisabled && type === 'edit'" />
              <!-- <editor
                v-model="state.currentData[item.prop]"
                :height="item.height"
                :placeholder="'请输入' + item.label"
                :disabled="item.editDisabled && type === 'edit'"
              /> -->
            </template>

            <template v-if="item.type === 'select'">
              <f-select
                class="w-full"
                v-model="state.currentData[item.prop]"
                :list="item.list"
                :label="item.label"
                :clearable="item.clearable"
                :multiple="item.multiple"
                :option="item.option"
                :disabled="item.editDisabled && state.type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'date'">
              <date-picker
                v-model="state.currentData[item.prop]"
                :label="item.label"
                :type="item.pickerType"
                :format="item.format"
                :disabled="item.editDisabled && state.type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'number'">
              <input-number
                v-model="state.currentData[item.prop]"
                :min="item.min"
                :max="item.max"
                :step="item.step"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'switch'">
              <f-switch
                v-model="state.currentData[item.prop]"
                :activeColor="item.activeColor"
                :inactiveColor="item.inactiveColor"
                :active-value="item.activeValue"
                :inactive-value="item.inactiveValue"
                :active-text="item.activeText"
                :inactive-text="item.inactiveText"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'radio'">
              <f-radio
                v-model="state.currentData[item.prop]"
                :list="item.list"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'checkbox'">
              <f-checkbox
                v-model="state.currentData[item.prop]"
                :list="item.list"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'textarea'">
              <div
                v-if="item.flag"
                style="transform: translate(-94px, 6px); width: 10px; height: 10px"
                :style="themeConfig.isDark ? 'background-color: #00114d' : 'background-color: #fff'"
              ></div>
              <el-input
                type="textarea"
                v-model="state.currentData[item.prop]"
                :rows="item.rows || 5"
                :placeholder="'请输入' + item.label"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'editor'">
              <editor
                v-model="state.currentData[item.prop]"
                :height="item.height"
                :placeholder="'请输入' + item.label"
                :disabled="item.editDisabled && type === 'edit'"
              />
            </template>

            <template v-if="item.type === 'transfer'">
              <f-transfer
                :leftData="item.leftData"
                :rightData="item.rightData"
                :option="item.option"
                :leftDefault="item.leftDefault"
                :rightDefault="item.rightDefault"
                @change="
                  (e: any) => {
                    changeTransfer(e, item)
                  }
                "
              />
            </template>

            <template v-if="item.type === 'treeSelect'">
              <tree-select
                v-model="state.currentData[item.prop]"
                :placeholder="'请选择' + item.label"
                :list="item.list"
                :multiple="item.multiple"
                :option="item.option"
                :default-expand-all="item?.expandAll"
                :node-key="item.keyValue"
                :disabled="item.editDisabled && type === 'edit'"
                :check-strictly="item.checkStrictly"
                :collapse-tags="item.collapseTags"
                :collapse-tags-tooltip="item.collapseTags"
                :clearable="item.clearable"
                :show-checkbox="item.showCheckbox"
                @change="
                  (e: any) => {
                    changeTreeSelect(e, item)
                  }
                "
              />
            </template>

            <template v-if="item.type === 'tree'">
              <tree
                :height="350"
                :list="item.list"
                :option="item.option"
                :showFilter="item.showFilter"
                :checkStrictly="item.checkStrictly"
                :showCheckbox="item.showCheckbox"
                :checkedKeys="item.checkedKeys"
                :expandedKeys="item.expandedKeys"
                :showEdit="false"
                @change="
                  (e: any) => {
                    changeTree(e, item)
                  }
                "
              />
            </template>
          </el-form-item>
        </template>
        <template v-else> {{ state.currentData[item.prop] }} </template>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>

<style lang="scss" scoped></style>
